<template>
  <el-form
    ref="temp"
    class="linkage"
    :rules="rules"
    :model="temp"
    :inline="true"
    label-width="110px"
  >
    <el-form-item
      label="地址"
      prop="provinceCode"
    >
      <el-select
        v-model="temp.provinceCode"
        placeholder="省级地区"
        style="width:156px"
        prop="provinceCode"
        @change="choseProvince"
      >
        <el-option
          v-for="item in province"
          :key="item.name"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="cityCode">
      <el-select
        v-model="temp.cityCode"
        placeholder="市级地区"
        style="width:120px"
        prop="cityCode"
        @change="choseCity"
      >
        <el-option
          v-for="item in shi1"
          :key="item.name"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="areaCode">
      <el-select
        v-model="temp.areaCode"
        placeholder="区级地区"
        style="width:120px"
        prop="areaCode"
        @change="choseBlock"
      >
        <el-option
          v-for="item in qu1"
          :key="item.name"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      prop="address"
      label="详细地址"
    >
      <el-input
        v-model="temp.address"
        placeholder="详细地址"
        style="width:424px!important;"
        @input="addressCheck"
      />
    </el-form-item>

  </el-form>
</template>
<script>
import { getAllProvince, getCityByProvince, getAreaByCity } from '@/api/v1'

export default {
  name: 'ProvinceData',
  props: ['temp'],
  data() {
    return {
      mapJson: '../static/json/map.json',
      province: '',
      provinceCode: '',
      cityCode: '',
      shi1: [],
      areaCode: '',
      qu1: [],
      city: '',
      block: '',
      address: '',
      rules: {
        provinceCode: [
          { required: true, message: '请选择地址', trigger: 'change' }
        ],
        cityCode: [
          { required: true, message: '请选择地址', trigger: 'change' }
        ],
        areaCode: [
          { required: true, message: '请选择地址', trigger: 'change' }
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getCityData()
  },

  methods: {
    clearProvinceDate() {
      this.$nextTick(() => {
        this.$refs['temp'].clearValidate()
      })
    },
    submitForm() {
      this.$refs['temp'].validate(valid => {
        // alert(valid);
        this.$emit('ifValid', valid)
        // return valid;
      })
    },
    // 加载china地点数据，三级
    getCityData: function() {
      console.log('getCityData.........')
      getAllProvince(this.listQuery).then(res => {
        this.province = res.data
        if (this.temp.provinceCode !== '') {
          this.cityByProvince(this.temp.provinceCode)
        }
        if (this.temp.cityCode !== '') {
          this.areaByCity(this.temp.cityCode)
        }
      })
    },
    cityByProvince: function(e) {
      const data = {
        code: e
      }
      console.log(data)
      getCityByProvince(data).then(res => {
        this.shi1 = res.data
      })
    },
    areaByCity: function(e) {
      const data = {
        code: e
      }
      getAreaByCity(data).then(res => {
        this.qu1 = res.data
      })
    },
    // 选省
    choseProvince: function(e) {
      console.log(e)
      this.temp.cityCode = ''
      this.temp.areaCode = ''
      this.cityByProvince(e)
      this.send()
    },
    // 选市
    choseCity: function(e) {
      this.areaByCity(e)
      this.send()
    },
    // 选区
    choseBlock: function(e) {
      this.send()
    },
    addressCheck: function(e) {
      console.log(e)
      this.send()
    },
    send: function(param) {
      const data = {
        provinceCode: this.temp.provinceCode,
        cityCode: this.temp.cityCode,
        areaCode: this.temp.areaCode,
        address: this.temp.address
      }
      this.$emit('listen', data)
      console.log(data)
    }
  }
}
</script>
<style>
</style>
